<script setup lang="ts">
import {ECodeCollapse, EDivider, EMessage, EClipboardUtil} from 'exploria-ui';
import packageJson from 'exploria-ui/package.json';
import './theme/light.scss';
import 'highlight.js';

import hljsVuePlugin from '@highlightjs/vue-plugin';
import {useSystemStore} from '@/stores/systemStore.ts';
import {ThemeEnum} from '@/types/global.d';

const {
  code,
  title = '基本用法',
  libs = [packageJson.name],
} = defineProps<{
  code?: string;
  title?: string;
  libs?: string[];
}>();

const highlightjs = hljsVuePlugin.component;
const copy = (code: string) => {
  EClipboardUtil.copy(code).then(() => {
    EMessage.success('复制成功');
  });
};
const colors = [
  '#ff6b8188',
  '#6c5ce788',

  '#fd79a888',
  '#a29bfe88',

  '#fdcb6e88',
  '#00b89488',

  '#e1705588',
  '#ff767588',

  '#74b9ff88',
  '#d6303188',
];
const systemStore = useSystemStore();
</script>

<template>
  <div :class="['demo-box', title]">
    <div class="title">{{ title }}</div>

    <div class="content" v-if="code">
      <template
          v-if="
                    libs.length && systemStore.currentTheme !== ThemeEnum.PLAIN
                "
      >
        <EDivider> 依赖</EDivider>
        <div class="lib">
          <div
              class="lib-item"
              v-for="lib of libs"
              :key="lib"
              :style="{
                            backgroundColor:
                                colors[Math.ceil(Math.random() * 10) - 1],
                        }"
          >
            {{ lib }}
          </div>
        </div>
      </template>

      <p v-else>
        依赖:
        <span
            class="lib-item"
            v-for="lib of libs"
            :key="lib"
            :style="{ display: 'inline-block', margin: '0 5px' }"
        >
                    {{ lib }}
                </span>
      </p>

      <template v-if="systemStore.currentTheme !== ThemeEnum.PLAIN">
        <EDivider>演示</EDivider>
        <div class="demo">
          <slot/>
        </div>
        <EDivider>基本用法</EDivider>

        <ECodeCollapse @copy="copy(code)">
          <highlightjs :code="code" class="code-container"/>
        </ECodeCollapse>
      </template>

      <template v-else>
        <p class="description">
          <slot name="description"/>
        </p>
        <div class="box">
          <div class="demo">
            <slot/>
          </div>
          <ECodeCollapse @copy="copy(code)">
            <highlightjs :code="code" class="code-container"/>
          </ECodeCollapse>
        </div>
      </template>
    </div>

    <slot v-else/>
  </div>
</template>

<style scoped lang="scss">
@use '@/style/global' as global;

.demo-box {
  margin: global.$gap 0;
  box-shadow: global.$box-shadow;
  border: global.$border;
  background-color: global.$background-color;
  border-radius: global.$border-radius;
  backdrop-filter: global.$backdrop-filter;
  overflow: hidden;

  &:first-child {
    margin-top: calc(#{global.$header-height} + #{global.$gap} * 2);
    @include global.useTheme(
            plain,
            (
                margin-top: unset,
            )
    );
    @include global.useTheme(
            phone,
            (
                margin: 0,
            )
    );
  }

  @include global.useTheme(
          plain,
          (
              backdrop-filter: none,
              box-shadow: none,
              border-radius: 0,
              border: none,
              padding: 20px 20px 0 20px,
          )
  );
  @include global.useTheme(
          phone,
          (
              margin: 0,
              backdrop-filter: none,
              box-shadow: none,
              border-radius: 0,
              border: none,
              padding: 20px 20px 0 20px,
          )
  );

  .title {
    color: #393939;
    font-size: 30px;
    margin: 10px;
    text-decoration: none;
    font-weight: bold;
    text-align: center;
    @include global.useTheme(
            plain,
            (
                margin: unset,
                text-align: start,
            )
    );
  }

  .content {
    :deep(.one-divider-line) {
      background-color: #bfbfbf;
    }

    .lib {
      padding: 20px;
      display: flex;
      flex-wrap: wrap;
      gap: 10px;

      .lib-item {
        font-size: 14px;
        padding: 2px 10px;
        color: white;
        border-radius: global.$border-radius;
      }
    }

    .demo {
      padding: 20px;
    }

    .description {
      padding: 20px;
      @include global.useTheme(
              plain,
              (
                  padding: 0,
              )
      );
    }

    .e-code-collapse {
      .code-container {
        margin: 0;
        overflow: auto;
      }
    }

    .box {
      border: solid 1px #bfbfbf;

      .e-code-collapse {
        border-top: solid 1px #bfbfbf;

        :deep(.e-code-collapse-footer) {
          border-top: 1px solid #bfbfbf;
        }

        .code-container {
          border-top: solid 1px #bfbfbf;
        }
      }
    }
  }
}
</style>
